<template>
  <div>
    <el-popover
      placement="bottom"
      :width="900"
      trigger="click"
      :show-arrow="false"
    >
      <template #reference>
        <el-input
          :disabled="disabled"
          v-model="title"
          placeholder=""
          @input="inputChange"
          :debounce="1000"
        >
          <template #prefix>
            <el-icon class="el-input__icon"><plus /></el-icon>
          </template>
        </el-input>
      </template>
      <el-table
        v-loading="loading"
        element-loading-background="rgba(0, 0, 0, 0)"
        max-height="300"
        :data="list"
        :header-cell-style="{ background: '#F5F5F5', 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        @row-click="clickRow"
      >
        <XMTableColumn
          width="200"
          property="medicineName"
          label="药品名称"
        ></XMTableColumn>
        <XMTableColumn
          width="200"
          property="commonName"
          label="通用名"
        ></XMTableColumn>
        <XMTableColumn width="200" property="spec" label="规格"></XMTableColumn>
        <XMTableColumn
          width="150"
          property="createEnterprise"
          label="生产厂家"
        ></XMTableColumn>
        <XMTableColumn
          width="150"
          property="price"
          label="单价"
        ></XMTableColumn>
      </el-table>
    </el-popover>
  </div>
</template>

<script>
  import { searchList } from '@/api/modules/medicinal'
  import { debounce, cloneDeep } from 'lodash-es'
  import { reactive, toRefs } from '@vue/reactivity'
  import { Plus } from '@element-plus/icons-vue'
  export default {
    name: 'MedicinalSelect',
    props: { disabled: Boolean },
    emits: ['selectData'],
    components: { Plus },
    setup(props, context) {
      // 防止用户多次输入
      const inputChange = debounce((name) => {
        console.log('inputChange' + name)
        toLoad(name)
      }, 500)
      const d = reactive({ title: null, list: [], loading: false })
      const toLoad = async function (name) {
        d.list = []
        if (!name && name !== 0) return
        d.loading = true
        const res = await searchList({ name })
        d.loading = false
        d.list = res.data
      }

      const clickRow = function (row) {
        // 深复制拷贝引用
        context.emit('selectData', cloneDeep(row))
      }
      return {
        inputChange,
        ...toRefs(d),
        clickRow,
      }
    },
  }
</script>

<style></style>
